<template>
  <div>

  </div>
</template>

<script lang="ts">
import { defineComponent, isReactive, reactive, ref, watch } from 'vue'

export default defineComponent({
  setup() {
    // const nums = ref<number[]>([])

    // setTimeout(() => {
    //   nums.value.push(1)

    //   console.log(`修改后`, nums.value);

    // }, 2000)

    // watch(
    //   nums,
    //   () => {
    //     console.log(`触发监听`, nums.value);

    //   },
    //   {
    //     deep: false
    //   }
    // )

    // reactive 默认开启深度监听

    // const foo = reactive({
    //   name: 'petter',
    //   age: 17
    // })

    // console.log(isReactive(foo));

    // const bar = ref({
    //   name: 'petter',
    //   age: 18
    // })

    // console.log(isReactive(bar));

    const message = ref<string>('')

    setTimeout(() => {
      message.value = `hello world!`
    }, 2000)

    // 不会立即执行
    // watch(message, () => {
    //   console.log(`触发监听`, message.value);
    // })

    // 初始化立即执行
    watch(
      message,
      () => {
        console.log(`触发监听`, message.value);

      },
      // 设置 immediate 选项
      {
        immediate: true
      }
    )





    return {}
  }
})
</script>

<style scoped>

</style>
